<template>
  <a-select
    v-model:value="selectValue"
    allow-clear
    :virtual="false"
    :options="options"
    placeholder="请选择"
    class="min-w-[160px]"
    :max-tag-count="2"
    :max-tag-text-length="10"
    :mode="multiple ? 'multiple' : ''"
    :field-names="{ label: 'mc', value: 'bm' }"
    @change="onChange"
    @focus="onFocus"
  >
    <template v-if="loading" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>
<script setup>
/**
 * @name:选择科室分类
 */
import { ref, watchEffect, onMounted } from 'vue'
import { post } from '@/utils/request'

const loading = ref(true)
const options = ref([])
const selectValue = ref(null)
const emit = defineEmits(['update:value', 'change'])
const props = defineProps({
  value: {
    type: [String, Array],
    default: undefined
  },
  multiple: {
    type: Boolean,
    default: false
  },
  trigger: {
    desc: '请求数据时机init:初始化/focus:聚焦',
    type: String,
    default: 'init'
  }
})
watchEffect(() => {
  selectValue.value = props.value || null
})
const onChange = (value, option) => {
  selectValue.value = value
  emit('update:value', value)
  emit('change', value, option)
}

// 获取数据
const getData = async () => {
  loading.value = true
  if (options.value.length > 0) return
  const { code, data } = await post('/common/masterData/getDeptInfoTypeList', {})
  loading.value = false
  if (code !== 0) return
  options.value = data
}
const onFocus = () => {
  props.trigger === 'focus' && getData()
}
onMounted(() => {
  props.trigger === 'init' && getData()
})
</script>
